<template>
  <div class="home-hot-film">
    <h2 class="class-title">
      热播电影
      <div class="hot-film-nav-wrap">
        <span
          class="hot-film-nav"
          v-for="hotFilmNav in hotFilmNavList"
          :key="hotFilmNav.id"
        >{{ hotFilmNav.nav_title }}</span>
      </div>
      <span class="go">全部></span></h2>
    <el-row>
      <el-col
        class="hotfilm"
        :span="5"
        v-for="hotFilm in hotFilmList"
        :key="hotFilm.id"
      >
        <el-card :body-style="{ padding: '0px' }">
          <img
            :src="hotFilm.img_url"
            class="image"
          >
          <p class="title">{{ hotFilm.title }}</p>
          <div class="score">{{ hotFilm.score }}</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data: () => ({
    hotFilmNavList: [],
    hotFilmList: []
  }),
  created() {
    this.getHotFilmNav()
    this.getHotFilm()
  },
  methods: {
    async getHotFilmNav() {
      try {
        const { data: { message } } = await this.Api.getHotFilmNav()
        this.hotFilmNavList = message
      } catch (error) {
        this.$MsgBox('获取首页热播电影导航栏的信息失败')
      }
    },
    async getHotFilm() {
      try {
        const { data: { message } } = await this.Api.getHotFilm()
        this.hotFilmList = message
      } catch (error) {
        this.$MsgBox('获取首页热播电影的信息失败')
      }
    },
  }
}
</script>
<style lang="less" scoped>
.home-hot-film {
  .class-title {
    color: #ef4238;
    .hot-film-nav-wrap {
      position: absolute;
      top: 4px;
      left: 150px;
      line-height: 1em;
      .hot-film-nav {
        font-size: 14px;
        margin-right: 5px;
        color: black;
      }
    }
  }
  .el-card {
    height: 220px;
    .title {
      left: 2px;
      bottom: 10px;
    }
    .score {
      right: 6px;
      bottom: 10px;
      font-style: italic;
    }
  }
}
</style>